<template>
  <div class="add-car">
    <el-dialog
        v-el-drag-dialog="{ drag: true, full: true, resize: true }"
        title="年现金结算"
        :close-on-click-modal="false"
        :visible.sync="md.state"
        @close="closeMd"
        v-if="md.state"
        width="60%"
        append-to-body>

      <!--   总收入   总支出   结算余额-->
      <el-form :label-width="'140px'">
        <el-form-item label="选择要结算年份">
          <el-date-picker
              value-format="yyyy"
              type="year"
              @change="handleChange"
              clearable
              v-model="monthlyTime"
              placeholder="选择要结算年份"/>
          <el-button style="margin-left: 20px;display: inline-block" type="primary" icon="el-icon-search"
                     @click="handleSearch">搜索
          </el-button>
          <div class="totalPay">
            <span>累计收入:{{ totalPay || 0 }}元</span>
            <span>累计支出:{{ totalGath || 0 }}元</span>
            <span>余额:{{ bankBalance || 0 }}元</span>
          </div>
        </el-form-item>
      </el-form>

      <el-table
          :ref="dg.tbName"
          :data="dg.list"
          height="400"
          row-key="id"
          border
          fit>
        <el-table-column label="结算时间" prop="settleTime"></el-table-column>
        <el-table-column label="名称" prop="settleName"></el-table-column>
        <el-table-column label="结算状态" prop="settleType">
          <template slot-scope="scope">
            {{ scope.row.settleType !== 0 ? "已结算" : "未结算" }}
          </template>
        </el-table-column>
        <el-table-column label="总收入" prop="settleInMoney"></el-table-column>
        <el-table-column label="总支出" prop="settleOutMoney"></el-table-column>
        <el-table-column label="总利润" prop="settleBalance"></el-table-column>
        <el-table-column label="操作员" prop="operUser.realName"></el-table-column>
      </el-table>
      <pagination
          :total="dg.total"
          :page.sync="dg.ps.page"
          :limit.sync="dg.ps.rows"
          @pagination="getDgList"
      />

      <div class="fm-btn-row">
        <el-button
            v-if="isOk"
            :loading="loading" style="margin-left: 20px" type="primary" icon="el-icon-s-order"
                   @click="handleAccount">确认年结算
        </el-button>
      </div>


    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'
import {mapGetters} from "vuex";
import {setBankYear, getSettleList} from "@/api/services/order.service";
import elDragDialog from "@/directive/el-drag-dialog";
import Pagination from '@/components/Pagination';
import AddAccount from "../add-account";
import UpdateAccount from "../update-account";


export default {
  name: "YearAccount",
  directives: {elDragDialog},
  components: {Pagination, AddAccount, UpdateAccount},
  props: ["state"],
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
    getBalance() {
      let reg = /^[0-9]+.?[0-9]*$/;
      let result = reg.test(this.bankBalance) ? '元' : ''
      return this.bankBalance + result
    }
  },
  data() {
    return {
      isOk:true,
      loading: false,
      isShowMap: false,
      md: {state: this.state},
      monthlyTime: '',
      totalPay: 0,
      totalGath: 0,
      bankBalance: 0,
      dg: {
        ps: {
          page: 1,
          rows: 20,
          sTime: '',
          eTime: '',
          settleType: 0 // settleType = 0月结算 ｜ 1年结算
        },
        total: 0,
        list: [],
      }
    };
  },
  mounted() {
    let day = moment().year()
    this.monthlyTime = `${day}`
    this.handleChange(day)
    this.getDgList()
  },
  methods: {
    handleSearch() {
      if (!this.monthlyTime) {
        return this.U.qerror("请先选择结算月份");
      }
      this.getDgList()
    },
    handleChange(year) {
      let month = `0${(moment().month()) + 1}`
      this.dg.ps.sTime = `${year}-${month}-01 00:00:00`
      let end = moment(`${year}-${month}`, "YYYY-MM").daysInMonth()
      this.dg.ps.eTime = `${year}-${month}-${end} 23:59:59`
    },
    getDgList() {
      let loading = this.U.qloading('数据请求中...');
      getSettleList(this.dg.ps).then(res => {
        console.log(res)
        const {totalPay, totalGath, bankBalance, data, count} = res
        this.U.qclose(loading);
        if (res.code === 1) {
          this.totalPay = totalPay
          this.totalGath = totalGath
          this.bankBalance = bankBalance
          this.dg.list = data;
          this.dg.total = count;
        }
      }).catch(() => {
        this.U.qclose(loading);
      })
    },
    // 立即结算
    handleAccount() {
      const {list} = this.dg
      if (!list || !list.length) {
        return this.U.qerror('没有要结算的信息了');
      }
      let settleIds = list.map(item => item.id).join(',')
      let settleName = `${moment().year()}年${moment().month() + 1}月现金结算表`
      let params = {
        settleIds,
        settleName,
        settleTime: this.dg.ps.sTime,
      }
      this.loading = true
      let loading = this.U.qloading('数据请求中...');
      setBankYear(params).then(res => {
        this.U.qclose(loading);
        this.loading = false
        this.isOk = false
        if (res.code !== 1) {
          return this.U.qerror(res.msg);
        }
        this.$emit('changeMonth')
        this.closeMd()
      }).catch(() => {
        this.isOk = true
        this.loading = false
        this.U.qclose(loading);
      })
    },
    closeMd() {
      this.$emit("getMdState", false);
    },
  },
};
</script>
<style lang="less" scoped>
.typeSty {
  padding: 0 20px 0 20px;
  font-weight: 600;
}

.totalPay {
  display: inline-block;
  padding-left: 30px;

  span {
    margin-right: 20px;
  }
}
</style>